<template>
  <div>
    <h1>FGDesigner 表单编辑器</h1>
    <div class="text1">可以通过拖拽的方式将单个组件组成一个完整的表单，生成JSON字符串</div>
    <el-card header="演示">
      <div slot="header" style="display:flex;justify-content:space-between">
        <span>演示</span>
        <div>
          <el-form :inline="true">
            <!-- <el-form-item label="enabled">
              <el-switch v-model="enabled" />
            </el-form-item>
            <el-form-item label="hideSaveBtn">
              <el-switch v-model="hideSaveBtn" />
            </el-form-item>-->
            <!-- <el-form-item> -->
            <el-button size="mini" round @click="dialogVisible=true">
              <el-tooltip content="点击此处查看表单编辑器生成的JSON表单数据" placement="top">
                <i class="el-icon-view" style="margin-right:5px"></i>
              </el-tooltip>表单数据
            </el-button>
            <!-- </el-form-item> -->
            <!-- <el-form-item> -->
            <el-button size="mini" icon="el-icon-user" circle @click="handleLogin" />
            <!-- </el-form-item> -->
            <!-- <el-form-item>
              <el-button
                size="mini"
                icon="el-icon-full-screen"
                circle
                @click="maxScreen=!maxScreen"
              />
            </el-form-item>-->
          </el-form>
        </div>
      </div>
      <FGDesigner
        class="comsDesiger"
        :class="maxScreen?'max-screen':''"
        :enabled="enabled"
        :hideSaveBtn="hideSaveBtn"
        v-model="value"
        @save="handleSave"
      />
      <div class="introduce">
        表单编辑器分为组件库、表单画板、属性面板三个区域：
        <h4>1. 组件库</h4>
        <div
          class="introduce-item"
        >组件库面板提供两种方式添加组件：点击（组件置于最下方）和拖拽（可手动拖拽到任意位置），将一个组件添加到画板中后，它会被自动选中，配置面板会显示该组件的所有属性，并且可以任意更改这些属性，例如组件类型、字段名称、标题、校验规则等。</div>
        <h4>2. 表单画板</h4>
        <div
          class="introduce-item"
        >表单画板是表单编辑器的主要工作区域，提供了一种直观的方式来构建和设计表单，在表单画板中，可以使用拖放和单击等交互式操作，完成复制、删除和移动表单组件</div>
        <h4>3. 属性面板（组件属性+表单属性）</h4>
        <div class="introduce-item">表单属性：用于配置表单属性的区域。</div>
        <div class="introduce-item">组件属性：用于配置组件属性的区域。当添加或选择表单中的一个组件时，该组件的属性将在属性面板中显示，可以任意修改该组件的属性配置。</div>
        <el-link href="#/config" type="primary" :underline="false">组件配置属性说明</el-link>
      </div>
    </el-card>

    <el-card header="代码">
      <Code :code="desigerCode" />
    </el-card>
    <el-card header="Attributes">
      <Attributes :data="desigerAttributes" />
    </el-card>
    <!-- <el-card header="Methods">
      <Methods :data="desigerMethods" />
    </el-card>-->
    <el-card header="Events">
      <Events :data="desigerEvents" />
    </el-card>
    <el-dialog
      title="表单编辑器生成的JSON表单数据"
      class="form-dialog"
      width="1000px"
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
    >
      <Code :code="value" />
    </el-dialog>
  </div>
</template>

<script>
import {
  desigerAttributes,
  desigerMethods,
  desigerCode,
  desigerEvents
} from "@/utils/comsData";
import Attributes from "./components/Attributes";
import Methods from "./components/Methods";
import FGDesigner from "@/package/FGDesigner";
import Events from "./components/Events";
import Code from "./components/Code";
import { deepClone } from "../../components/formGenerator/utils";
import { MessageBox } from "element-ui";
export default {
  components: { Attributes, Methods, FGDesigner, Events, Code },
  data() {
    return {
      desigerAttributes,
      desigerMethods,
      desigerCode,
      desigerEvents,
      dialogVisible: false,
      value: "",
      enabled: false,
      hideSaveBtn: false,
      maxScreen: false
    };
  },
  methods: {
    handleLogin() {
      this.$store.dispatch("login");
    },
    handleSave(form) {
      console.log("数据：", form);
      // this.$messageBox.
      // this.$store.commit("SET_FORMDATA", deepClone(form));
    }
  }
};
</script>

<style lang="scss" scope>
.comsDesiger {
  height: 800px;
  // border: 1px solid #f1e8e8;
  box-shadow: 0 0 4px #0000001a;
  border-radius: 5px;
  margin-bottom: 20px;
}
// .max-screen {
//   position: fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   height: 100vh;
//   z-index: 100;
//   background-color: #fff;
// }
</style>
